<template>
  <div id="detail" ref="detail">
    <detail-nav-bar ref="navBar" />
    <detail-swiper :topImages="topImages" class="detail-swiper" />
    <detail-base-info :goods="goodsInfo" />
    <detail-shop-info :shop="shopInfo" />
    <detail-goods-info :detail-info="detailInfo" />
    <detail-params-info :paramsInfo="paramsInfo" ref="detailParams" />
    <detail-comment-info :commentInfo="commentInfo" ref="detailComment" />
    <goods-list :goods="recommends" class="goods-list" ref="detailGoods" />
    <img-click-big
      @imgClose="imgClose"
      :imgUrl="bigImgSrc"
      :is-show="bigImgIsShow"
    />
    <detailBottomBar @addToCart="addToCat" @buy="buy" />
    <detail-back-top />
  </div>
</template>

<script>
//子
import detailNavBar from "@/views/detail/childComps/detailNavBar";
import detailSwiper from "@/views/detail/childComps/detailSwiper";
import detailBaseInfo from "@/views/detail/childComps/detailBaseInfo";
import detailShopInfo from "@/views/detail/childComps/detailShopInfo";
import detailGoodsInfo from "@/views/detail/childComps/detailGoodsInfo";
import detailParamsInfo from "@/views/detail/childComps/detailParamsInfo";
import detailCommentInfo from "@/views/detail/childComps/detailCommentInfo";
import detailBottomBar from "@/views/detail/childComps/detailBottomBar";
import detailBackTop from "@/views/detail/childComps/detailBackTop";
//公共
import imgClickBig from "@/components/common/imgcickbig/imgClickBig";
import GoodsList from "@/components/content/goods/GoodsList";
//网络
import {
  getDetail,
  Goods,
  Shop,
  goodsParams,
  getRecommend,
} from "@/network/detail";

export default {
  name: "Detail",
  data() {
    return {
      iid: null,
      topImages: [],
      goodsInfo: {}, //detailBaseInfo.vue 需要展示的数据
      shopInfo: {}, //detailShopInfo.vue 需要展示的数据
      detailInfo: {}, //detailGoodsInfo.vue  需要展示的数据
      paramsInfo: {},
      commentInfo: {},
      bigImgSrc: "",
      bigImgIsShow: false,
      recommends: [], //推荐列表
      currentIndex: 0,
      buyInfo: {}, //购买展示的信息
    };
  },
  components: {
    GoodsList,
    detailNavBar,
    detailSwiper,
    detailBaseInfo,
    detailShopInfo,
    detailGoodsInfo,
    detailParamsInfo,
    detailCommentInfo,
    imgClickBig,
    detailBottomBar,
    detailBackTop,
  },
  created() {
    this.iid = this.$route.params.iid;
    getDetail(this.iid).then((res) => {
      const data = res.result;
      // 获取顶部轮播图片
      this.topImages = data.itemInfo.topImages;
      //获取商品信息
      this.goodsInfo = new Goods(
        data.itemInfo,
        data.columns,
        data.shopInfo.services.slice(0, 4)
      );
      //获取店铺信息
      this.shopInfo = new Shop(data.shopInfo);
      //获取商品详细信息
      this.detailInfo = data.detailInfo;
      //获取商品参数
      this.paramsInfo = new goodsParams(
        data.itemParams.info,
        data.itemParams.rule
      );
      //评论信息
      if (data.rate.cRate !== 0) {
        this.commentInfo = data.rate.list[0];
      }

      //obj是base信息和一张图片
      let obj = new Goods(
        data.itemInfo,
        data.columns,
        data.shopInfo.services.slice(0, 4)
      );
      obj.iid = this.iid;
      obj.image = data.itemInfo.topImages[0];
      //记录浏览记录
      this.$store.commit("addBrowsingHistoryList", obj);
      //购买需要展示的信息
      const buy = {};
      buy.image = data.itemInfo.topImages[0];
      buy.title = data.itemInfo.title;
      buy.desc = data.itemInfo.desc;
      buy.price = data.itemInfo.lowNowPrice;
      buy.iid = this.iid;
      let list = [];
      list.push(buy);
      this.buyInfo = list;
    });
    //推荐
    getRecommend().then((res) => {
      this.recommends = res.data.list;
    });
  },
  methods: {
    imgClick(src) {
      this.bigImgSrc = src;
      this.bigImgIsShow = true;
    },
    imgClose() {
      this.bigImgSrc = "";
      this.bigImgIsShow = false;
    },
    addToCat() {
      //购物车需要展示的信息
      const product = {};
      product.image = this.topImages[0];
      product.title = this.goodsInfo.title;
      product.desc = this.goodsInfo.desc;
      product.price = this.goodsInfo.realPrice;
      product.iid = this.iid;
      //将商品加入购物车
      this.$store.dispatch("addCart", product).then((res) => {
        this.$toast.show(res, 2000);
      });
    },
    buy() {
      this.$store.dispatch("aUpdateBuyList", this.buyInfo).then((res) => {
        console.log(res);
        this.$router.push("/order");
      });
    },
  },
  mounted() {
    if (
      this.$refs.detailParams.$el &&
      this.$refs.detailComment.$el &&
      this.$refs.detailGoods.$el
    ) {
      document.onscroll = () => {
        const params = this.$refs.detailParams.$el.offsetTop;
        const comment = this.$refs.detailComment.$el.offsetTop;
        const goods = this.$refs.detailGoods.$el.offsetTop;
        let d = window.pageYOffset;

        if (d < params) {
          this.$refs.navBar.currentIndex = 0;
        }
        if (d >= params && d <= comment) {
          this.$refs.navBar.currentIndex = 1;
        }
        if (d >= comment) {
          if (d <= goods) {
            this.$refs.navBar.currentIndex = 2;
          } else {
            this.$refs.navBar.currentIndex = 3;
          }
        }
      };
    }
  },
  destroyed() {
    document.onscroll = null;
  },
};
</script>

<style scoped>
#detail {
  position: relative;
  z-index: 99;
  background-color: white;
}
.detail-swiper {
  margin-top: 44px;
}
.goods-list {
  padding-bottom: 70px;
  padding-top: 50px;
  position: relative;
  border-top: 1px solid #ffffff;
}
.goods-list:before {
  content: "推荐商品";
  position: absolute;
  height: 30px;
  width: 100%;
  text-align: center;
  top: 15px;
  font-size: 16px;
  font-weight: 700;
}
.goods-list:after {
  content: "已经拉到底部啦，没有更多了！";
  padding-top: 20px;
}
</style>
